<script setup>
import {
  CircleCheck,
  Edit,
  PieChart,
  Shop,
  UserFilled,
  CaretBottom
} from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { getCurrentAdminInfo } from "@/api/admin";

const router = useRouter();
const curAdmin = ref({
  id: 0,
  username: '管理员',
  password: ''
})

// 退出登录
const logout = () => {
  router.push("/adminLoginPage")
  ElMessage.success("退出登录成功")
}

const getCurAdmin = () => {
  getCurrentAdminInfo().then(res => {
    if(res.data){
      curAdmin.value = res.data
    } else {
      ElMessage.error("获取管理员信息失败，请登录");
      router.push("/adminLoginPage")
    }
  })
}
getCurAdmin()
</script>

<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="180px">
      <div class="el-aside__logo">
        <!-- 与首页一致的对称式logo：对话气泡+单星星 -->
        <svg
            class="logo-icon"
            viewBox="0 0 48 48"
            fill="none"
        >
          <!-- 外层对称气泡形状 -->
          <path d="M12 24C12 15.1634 19.1634 8 28 8C36.8366 8 44 15.1634 44 24C44 32.8366 36.8366 40 28 40C23.5817 40 19.5291 38.2426 16.5858 35.2993L12 40V24Z"
                stroke="#1E40AF" stroke-width="2.5" fill="#EFF6FF"/>

          <!-- 中央评分星星 -->
          <path d="M24 14L26.5 22L34 22L28 26.5L30 34L24 30L18 34L20 26.5L14 22L21.5 22L24 14Z"
                fill="#1E40AF"/>
        </svg>
        <span class="logo-text">点评通管理系统</span>
      </div>
      <el-menu
          class="sidebar-menu"
          text-color="#64748B"
          active-text-color="#1E40AF"
          background-color="#FFFFFF"
          router
          :default-active="'/admin/audit'"
      >
        <el-menu-item index="/admin/audit">
          <el-icon><CircleCheck /></el-icon>
          <span>审核</span>
        </el-menu-item>
        <el-menu-item index="/admin/dataAnalysis">
          <el-icon><PieChart /></el-icon>
          <span>数据分析</span>
        </el-menu-item>
        <el-sub-menu index="user-management">
          <template #title>
            <el-icon><Edit /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/admin/ordinaryUserList">
            <el-icon><UserFilled /></el-icon>
            <span>普通用户管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/merchantList">
            <el-icon><Shop /></el-icon>
            <span>商家管理</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header class="header">
        <div class="welcome-message">
          <span class="welcome-text">欢迎：</span>
          <span class="admin-name">{{ curAdmin.username }}</span>
        </div>
        <div class="header-actions">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-icon><UserFilled /></el-icon>
              <span class="admin-username">{{ curAdmin.username }}</span>
              <el-icon><CaretBottom /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 中间区域 -->
      <el-main class="main-content">
        <router-view />
      </el-main>

      <!-- 底部区域 -->
      <el-footer class="footer">
        <span>点评通 ©2025 管理员后台管理系统</span>
      </el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
// 颜色变量
$primary: #1E40AF;
$primary-light: #3B82F6;
$primary-glass: rgba(30, 64, 175, 0.1);
$text-primary: #1E293B;
$text-secondary: #64748B;
$text-tertiary: #94A3B8;
$bg-light: #F8FAFC;
$white: #FFFFFF;
$shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
$shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.layout-container {
  height: 100vh;

  // 左侧边栏
  .el-aside {
    background-color: $white;
    border-right: 1px solid #E2E8F0;

    &__logo {
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: none;

      .logo-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
        transition: transform 0.3s ease, filter 0.3s ease;

        &:hover {
          transform: rotate(5deg) scale(1.05);
          filter: drop-shadow(0 0 8px rgba(30, 64, 175, 0.3));
        }
      }

      .logo-text {
        font-size: 16px;
        font-weight: 600;
        color: $primary;
        text-align: center;
      }
    }

    // 侧边栏菜单
    .sidebar-menu {
      border-right: none;

      .el-menu-item,
      .el-sub-menu__title {
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 20px !important;
        transition: all 0.3s ease;

        .el-icon {
          width: 20px;
          margin-right: 10px;
          font-size: 16px;
        }

        &:hover {
          background-color: $primary-glass !important;
          color: $primary !important;
        }
      }

      .el-sub-menu .el-menu-item {
        padding-left: 40px !important;
      }

      .el-menu-item.is-active {
        background-color: $primary-glass !important;
        color: $primary !important;
        font-weight: 500;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 10px;
          bottom: 10px;
          width: 3px;
          background-color: $primary;
          border-radius: 0 2px 2px 0;
        }
      }
    }
  }

  // 头部区域
  .header {
    background-color: $white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px !important;
    padding: 0 24px;
    border-bottom: 1px solid #E2E8F0;

    .welcome-message {
      .welcome-text {
        color: $text-secondary;
      }

      .admin-name {
        color: $primary;
        font-weight: 500;
      }
    }

    .header-actions {
      .el-dropdown-link {
        cursor: pointer;
        display: flex;
        align-items: center;
        color: $text-secondary;
        transition: color 0.3s ease;

        .admin-username {
          margin: 0 8px;
        }

        &:hover {
          color: $primary;
        }
      }
    }
  }

  // 主内容区域
  .main-content {
    background-color: $bg-light;
    padding: 24px;
    overflow-y: auto;
  }

  // 底部区域
  .footer {
    background-color: $white;
    height: 40px !important;
    border-top: 1px solid #E2E8F0;

    span {
      color: $text-tertiary;
    }
  }
}
</style>